<template>
  <div id="container">
    <!-- <h1>{{ msg }}</h1> -->
    <!-- <h2>Essential Links</h2> -->
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App'
    };
  },
  mounted() {
    console.log(AMap.Map);
    // 地图初始化应该在地图容器div已经添加到DOM树之后
    var map = new AMap.Map('container', {
      zoom: 12, //级别
      center: [112, 34], //中心点坐标
      viewMode: '3D' //使用3D视图
    });
  },
  methods: {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* 地图 */
#container {
  width: 300px;
  height: 180px;
}
/* 样式 */
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
